<template>
  <iLayout>
    <section slot="title">用户列表</section>
    <section slot="operation">
      <el-button type="primary" round icon="el-icon-plus" @click="addUser">新建用户</el-button>
    </section>
    <section slot="right" class="h100 flex_column flex_sb">
      <div class="flex_1">
        <el-table :data="user.data" stripe border>
          <el-table-column label="用户名" prop="name"></el-table-column>
          <!-- <el-table-column label="昵称" prop="nickName"></el-table-column>
          <el-table-column label="工号" prop="jobNum"></el-table-column> -->
          <el-table-column label="手机号" prop="phone" width="130"></el-table-column>
          <el-table-column label="邮箱" prop="email" width="250"></el-table-column>
          <el-table-column label="创建人" prop="creatorName"></el-table-column>
          <el-table-column label="更新人" prop="updateName"></el-table-column>
          <el-table-column label="操作" width="220px" fixed="right">
            <template slot-scope="scope">
              <el-button type="warning" round icon="el-icon-edit" @click="editUser(scope.row)">修改</el-button>
              <el-button type="danger" round icon="el-icon-delete" @click="deleteUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.index"
          :page-size.sync="page.limit"
          layout="total, prev, pager, next, jumper"
          :total.sync="page.total"
          >></el-pagination
        >
      </div>
    </section>

    <section>
      <el-dialog :visible.sync="dialog.visible" :title="dialog.title" width="30%" destroy-on-close>
        <div class="form">
          <user-form ref="userForm" :model="user.form" :rules="user.rules" :acountType="user.form.type" :isEdit="isEdit"></user-form>
        </div>
        <div slot="footer">
          <el-button type="default" @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="isDelete" title="删除菜单" width="30%">
        此操作将冻结用户：<el-tag type="danger">{{ user.form.name }}</el-tag
        >，您确认冻结该账户吗？
        <div slot="footer">
          <el-button type="default" @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="none" title="没有选择角色" width="30%">
        <div>您还未为其选择角色，这会导致其没有任何权限，确认吗？</div>
        <div slot="footer">
          <el-button type="default" @click="none = false">取消</el-button>
          <el-button type="primary" @click="noneFun">确认</el-button>
        </div>
      </el-dialog>
    </section>
  </iLayout>
</template>

<script>
import UserForm from './components/user_form.vue'
import * as api from '../../api/private/user'
import * as validate from '../../utils/validate'
export default {
  name: 'User',
  components: {
    UserForm
  },
  data: () => ({
    page: {
      index: 1,
      limit: 8,
      total: 0
    },
    role: {
      data: []
    },
    user: {
      data: [],
      form: {},
      rules: {
        name: [{ required: true, message: '用户名名称不能为空', trigger: 'blur' }],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validate.checkPhone, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validate.checkEmail, trigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    },
    dialog: {
      visible: false,
      title: ''
    },
    isEdit: false,
    isDelete: false,
    none: false
  }),
  methods: {
    async getUser() {
      let req = { page: this.page.index, limit: this.page.limit }
      const data = await api.gerUser(req)
      if (data.code === 0) {
        this.user.data = data.data.list
        this.page.total = data.data.total
      } else {
        this.$msg.error(`获取用户列表失败，${data.msg}`)
      }
    },
    confirm() {
      if (this.isEdit) {
        this.confirmEditUser()
      } else {
        this.confirmAddUser()
      }
      if (this.isDelete) {
        this.confirmDeleteUser()
      }
    },
    cancel() {
      this.user.form = {}
      this.$refs.userForm.resetFields()
      this.dialog.visible = false
      this.dialog.title = ''
      this.isEdit = false
      this.isDelete = false
    },
    addUser() {
      this.dialog.visible = true
      this.isEdit = false
      this.dialog.title = '添加用户'
      this.user.form = {
        companyId: '',
        roleList: [],
        type: 1,
        password: '123456'
      }
    },
    confirmAddUser() {
      if (this.user.form.roleList.length <= 0) return (this.none = true)
      this.confirmAddUserFun()
    },
    async confirmAddUserFun() {
      if (this.$refs.userForm.validate()) {
        const data = await api.addUser(this.user.form)
        if (data.code === 0) {
          this.$msg.success(`用户添加成功`)
          this.cancel()
          this.getUser()
          this.$refs.userForm.resetFields()
          this.none = false
        } else {
          this.$msg.error(`用户添加失败，${data.msg}`)
        }
      }
    },
    editUser(data) {
      this.user.form = JSON.parse(JSON.stringify(data))
      this.isEdit = true
      this.dialog.visible = true
      this.dialog.title = '修改用户信息'
    },
    confirmEditUser() {
      if (this.user.form.roleList.length <= 0) return (this.none = true)
      this.confirmEditUserFun()
    },
    async confirmEditUserFun() {
      if (this.$refs.userForm.validate()) {
        const data = await api.editUser(this.user.form)
        if (data.code === 0) {
          this.$msg.success(`用户修改成功`)
          this.cancel()
          this.getUser()
          this.none = false
        } else {
          this.$msg.error(`用户修改失败，${data.msg}`)
        }
      }
    },
    noneFun() {
      if (!this.isEdit) {
        this.confirmAddUserFun()
      } else {
        this.confirmEditUserFun()
      }
    },
    deleteUser(data) {
      this.user.form = data
      this.isDelete = true
    },
    async confirmDeleteUser() {
      const data = await api.freezeUser([this.user.form.id])
      if (data.code === 0) {
        this.$msg.success(`用户删除成功`)
        this.cancel()
        this.getUser()
      } else {
        this.$msg.error(`用户删除失败，${data.msg}`)
      }
    },
    handleSizeChange() {
      this.getUser()
    },
    handleCurrentChange() {
      this.getUser()
    }
  },
  created() {
    this.getUser()
  }
}
</script>

<style lang="scss" scoped>
.operation {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.middle {
  width: 100%;
  height: calc(100% - 6rem);
}

.pagination {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
